<!doctype  html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org">
<head th:include="common/common::sources(title='账户详情')"></head>
<body>
	<!-- 头部 -->
	<div th:include="components/header::navbar"></div>
	<div class="main-container" id="main-container">
		<div class="main-container-inner">
			<a class="menu-toggler" id="menu-toggler" href="#"> <span
				class="menu-text"></span>
			</a>
			<!-- 菜单 -->
			<div th:substituteby="components/leftbar::sidebar"></div>
			<!-- 主页面 -->
			<div class="main-content">
				<div class="breadcrumbs" id="breadcrumbs">
					<ul class="breadcrumb">
						<li><i class="icon-home home-icon"></i> <a href="#">首页</a></li>
						<li><a href="#">基本信息管理</a></li>
						<li class="active">用户管理</li>
					</ul>
					<!-- .breadcrumb -->
				</div>
				<div class="page-content">
					<div class="page-header">
						<h1>
							用户管理 <small> <i class="icon-double-angle-right"></i> 用户详情
							</small>
						</h1>
					</div>
					<!-- /.page-header -->
					<div class="row">
						<div class="col-xs-12">
							<!-- PAGE CONTENT BEGINS -->
							<div>
								<div id="user-profile-1" class="user-profile row">
									<div class="col-xs-12 col-sm-3 center">
										<div>
											<span class="profile-picture"> <img id="avatar"
												class="editable img-responsive" alt="Alex's Avatar"
												th:src="@{${cdn}+'/assets/avatars/profile-pic.jpg'}" />
											</span>
											<div class="space-4"></div>
											<div
												class="width-80 label label-info label-xlg arrowed-in arrowed-in-right">
												<div class="inline position-relative">
													<a href="#" class="user-title-label dropdown-toggle"
														data-toggle="dropdown"> <i
														class="icon-circle light-green middle"></i> <span
														class="white">Alex M. Doe</span>
													</a>
													<ul
														class="align-left dropdown-menu dropdown-caret dropdown-lighter">
														<li class="dropdown-header">Change Status</li>
														<li><a href="#"> <i class="icon-circle green"></i>
																<span class="green">Available</span>
														</a></li>
														<li><a href="#"> <i class="icon-circle red"></i>
																<span class="red">Busy</span>
														</a></li>
														<li><a href="#"> <i class="icon-circle grey"></i>
																<span class="grey">Invisible</span>
														</a></li>
													</ul>
												</div>
											</div>
										</div>
										<div class="space-6"></div>
										<div class="profile-contact-info">
											<div class="profile-contact-links align-left">
												<a class="btn btn-link" href="#"> <i
													class="icon-envelope bigger-120 pink"></i> Send a message
												</a>
											</div>
											<div class="space-6"></div>
										</div>
										<div class="hr hr16 dotted"></div>
									</div>
									<div class="col-xs-12 col-sm-9">
										<div class="space-12"></div>
										<div class="profile-user-info profile-user-info-striped">
											<div class="profile-info-row">
												<div class="profile-info-name">Username</div>
												<div class="profile-info-value">
													<span class="editable" id="username">alexdoe</span>
												</div>
											</div>
											<div class="profile-info-row">
												<div class="profile-info-name">Location</div>
												<div class="profile-info-value">
													<i class="icon-map-marker light-orange bigger-110"></i> <span
														class="editable" id="country">Netherlands</span> <span
														class="editable" id="city">Amsterdam</span>
												</div>
											</div>
											<div class="profile-info-row">
												<div class="profile-info-name">Age</div>
												<div class="profile-info-value">
													<span class="editable" id="age">38</span>
												</div>
											</div>
											<div class="profile-info-row">
												<div class="profile-info-name">Joined</div>
												<div class="profile-info-value">
													<span class="editable" id="signup">20/06/2010</span>
												</div>
											</div>
											<div class="profile-info-row">
												<div class="profile-info-name">Last Online</div>
												<div class="profile-info-value">
													<span class="editable" id="login">3 hours ago</span>
												</div>
											</div>
											<div class="profile-info-row">
												<div class="profile-info-name">About Me</div>
												<div class="profile-info-value">
													<span class="editable" id="about">Editable as
														WYSIWYG</span>
												</div>
											</div>
										</div>
										<div class="space-20"></div>
									</div>
									<!-- /span -->
								</div>
								<!-- /user-profile -->
							</div>
							<!-- PAGE CONTENT ENDS -->
						</div>
						<!-- /.col -->
					</div>
					<!-- /.row -->
				</div>
				<!-- /.page-content -->
			</div>
			<!-- 工具栏 -->
			<div th:include="components/toolbar::toolbar"></div>
		</div>
		<!-- 回到顶部 -->
		<a href="#" id="btn-scroll-up"
			class="btn-scroll-up btn btn-sm btn-inverse"> <i
			class="icon-double-angle-up icon-only bigger-110"></i>
		</a>
	</div>
	<!-- js 资源 -->
	<div th:include="components/footer::basescript"></div>
	<script type="text/javascript">
		/*<![CDATA[*/
		jQuery(function($) {
			//editables on first profile page
			$.fn.editable.defaults.mode = 'inline';
			$.fn.editableform.loading = "<div class='editableform-loading'><i class='light-blue icon-2x icon-spinner icon-spin'></i></div>";
			$.fn.editableform.buttons = '<button type="submit" class="btn btn-info editable-submit"><i class="icon-ok icon-white"></i></button>'
					+ '<button type="button" class="btn editable-cancel"><i class="icon-remove"></i></button>';
			//editables 
			$('#username').editable({
				type : 'text',
				name : 'username'
			});
			var countries = [];
			$.each({
				"CA" : "Canada",
				"IN" : "India",
				"NL" : "Netherlands",
				"TR" : "Turkey",
				"US" : "United States"
			}, function(k, v) {
				countries.push({
					id : k,
					text : v
				});
			});

			var cities = [];
			cities["CA"] = [];
			$.each([ "Toronto", "Ottawa", "Calgary", "Vancouver" ], function(k,
					v) {
				cities["CA"].push({
					id : v,
					text : v
				});
			});
			cities["IN"] = [];
			$.each([ "Delhi", "Mumbai", "Bangalore" ], function(k, v) {
				cities["IN"].push({
					id : v,
					text : v
				});
			});
			cities["NL"] = [];
			$.each([ "Amsterdam", "Rotterdam", "The Hague" ], function(k, v) {
				cities["NL"].push({
					id : v,
					text : v
				});
			});
			cities["TR"] = [];
			$.each([ "Ankara", "Istanbul", "Izmir" ], function(k, v) {
				cities["TR"].push({
					id : v,
					text : v
				});
			});
			cities["US"] = [];
			$.each(
					[ "New York", "Miami", "Los Angeles", "Chicago",
							"Wysconsin" ], function(k, v) {
						cities["US"].push({
							id : v,
							text : v
						});
					});
			var currentValue = "NL";
			$('#country').editable(
					{
						type : 'select2',
						value : 'NL',
						source : countries,
						success : function(response, newValue) {
							if (currentValue == newValue)
								return;
							currentValue = newValue;
							var new_source = (!newValue || newValue == "") ? []
									: cities[newValue];
							//so we remove it altogether and create a new element
							var city = $('#city').removeAttr('id').get(0);
							$(city).clone().attr('id', 'city').text(
									'Select City').editable({
								type : 'select2',
								value : null,
								source : new_source
							}).insertAfter(city);//insert it after previous instance
							$(city).remove();//remove previous instance

						}
					});
			$('#city').editable({
				type : 'select2',
				value : 'Amsterdam',
				source : cities[currentValue]
			});
			$('#signup').editable({
				type : 'date',
				format : 'yyyy-mm-dd',
				viewformat : 'dd/mm/yyyy',
				datepicker : {
					weekStart : 1
				}
			});
			$('#age').editable({
				type : 'spinner',
				name : 'age',
				spinner : {
					min : 16,
					max : 99,
					step : 1
				}
			});
			$('#login').editable({
				type : 'slider',//$range.type == 'range' ? 'range' : 'slider',
				name : 'login',
				slider : {
					min : 1,
					max : 50,
					width : 100
				},
				success : function(response, newValue) {
					if (parseInt(newValue) == 1)
						$(this).html(newValue + " hour ago");
					else
						$(this).html(newValue + " hours ago");
				}
			});
			$('#about').editable({
				mode : 'inline',
				type : 'wysiwyg',
				name : 'about',
				wysiwyg : {
				//css : {'max-width':'300px'}
				},
				success : function(response, newValue) {
				}
			});
			// *** editable avatar *** //
			try {//ie8 throws some harmless exception, so let's catch it
				//it seems that editable plugin calls appendChild, and as Image doesn't have it, it causes errors on IE at unpredicted points
				//so let's have a fake appendChild for it!
				if (/msie\s*(8|7|6)/.test(navigator.userAgent.toLowerCase()))
					Image.prototype.appendChild = function(el) {
					}
				var last_gritter
				$('#avatar')
						.editable(
								{
									type : 'image',
									name : 'avatar',
									value : null,
									image : {
										//specify ace file input plugin's options here
										btn_choose : 'Change Avatar',
										droppable : true,
										//and a few extra ones here
										name : 'avatar',//put the field name here as well, will be used inside the custom plugin
										max_size : 110000,//~100Kb
										on_error : function(code) {//on_error function will be called when the selected file has a problem
											if (last_gritter)
												$.gritter.remove(last_gritter);
											if (code == 1) {//file format error
												last_gritter = $.gritter
														.add({
															title : 'File is not an image!',
															text : 'Please choose a jpg|gif|png image!',
															class_name : 'gritter-error gritter-center'
														});
											} else if (code == 2) {//file size rror
												last_gritter = $.gritter
														.add({
															title : 'File too big!',
															text : 'Image size should not exceed 100Kb!',
															class_name : 'gritter-error gritter-center'
														});
											} else {//other error
											}
										},
										on_success : function() {
											$.gritter.removeAll();
										}
									},
									url : function(params) {
										// ***UPDATE AVATAR HERE*** //
										//You can replace the contents of this function with examples/profile-avatar-update.js for actual upload
										var deferred = new $.Deferred
										//if value is empty, means no valid files were selected
										//but it may still be submitted by the plugin, because "" (empty string) is different from previous non-empty value whatever it was
										//so we return just here to prevent problems
										var value = $('#avatar').next().find(
												'input[type=hidden]:eq(0)')
												.val();
										if (!value || value.length == 0) {
											deferred.resolve();
											return deferred.promise();
										}
										//dummy upload
										setTimeout(
												function() {
													if ("FileReader" in window) {
														//for browsers that have a thumbnail of selected image
														var thumb = $('#avatar')
																.next().find(
																		'img')
																.data('thumb');
														if (thumb)
															$('#avatar').get(0).src = thumb;
													}
													deferred.resolve({
														'status' : 'OK'
													});
													if (last_gritter)
														$.gritter
																.remove(last_gritter);
													last_gritter = $.gritter
															.add({
																title : 'Avatar Updated!',
																text : 'Uploading to server can be easily implemented. A working example is included with the template.',
																class_name : 'gritter-info gritter-center'
															});

												},
												parseInt(Math.random() * 800 + 800))
										return deferred.promise();
									},
									success : function(response, newValue) {
									}
								})
			} catch (e) {
			}
		});
		/*]]>*/
	</script>
</body>
</html>
